<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./css/bootstrap-5.2.0.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="container py-5" id="app">
      <div class="box d-grid gap-5 col-sm-6 mx-auto py-5">
        <h1 class="display-5 fw-bold text-success text-center">
          像素分辨率转换
        </h1>
        <div class="row">
          <div class="col-sm-3">
            <label for="" class="col-form-label">宽度(毫米)</label>
          </div>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="width" />
          </div>
          <p>1厘米=10毫米，1英寸=25.4毫米</p>
        </div>
        <div class="row">
          <div class="col-sm-3">
            <label for="" class="col-form-label">高度(毫米)</label>
          </div>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="height" />
          </div>
          <p>1厘米=10毫米，1英寸=25.4毫米</p>
        </div>
        <div class="row">
          <div class="col-sm-3">
            <label for="" class="col-form-label">分辨率</label>
          </div>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="ppi" />
          </div>
          <p>96 dpi、120 dpi、144 dpi</p>
        </div>
        <button
          type="button"
          class="btn btn-outline-primary col-6 mx-auto"
          id="btn"
        >
          转 换
        </button>
        <div class="text-danger text-center fs-1" id="res">结果</div>
      </div>

      <footer class="position-fixed start-0 bottom-0 w-100 text-center">
        <p class="text-center">&copy; <a href="//bealei.com">bealei</a></p>
      </footer>
    </div>
  </body>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="./js/index.js"></script>
  <script>
    // const { createApp } = Vue;

    // createApp({
    //   data() {
    //     return {
    //       res: 'Hello Vue!',
    //     };
    //   },
    // }).mount('#app');
  </script>
</html>
